<template>
    <div class="collect" v-if="data">
        <page-title :title="data.ptitle"></page-title>
        <swiper :aspect-ratio="1/4" :show-dots="false" loop auto class="cl-swiper">
            <img :src="data.content.gainWechatImg">
        </swiper>
        <article class="article">
            <div class="dt-header">
                <h2>{{data.ptitle}}</h2>
                <p class="dt-info">
                    <span class="pushdate">
                        <span>{{data.create_time}}</span>
                    </span>
                </p>
                <span class="audited" style="background-color: rgba(255, 165, 0, 0.96);" v-if="data.audit_status==0">
                    <i class="iconfont icon-unaudited"></i>&nbsp;待审阅</span>
                <span class="audited" style=" background-color: #4caf50;" v-else>
                    <i class="iconfont icon-audited"></i>&nbsp;已审阅</span>
            </div>
            <div class="rich-ctx" v-html="data.rich_ctx">
                <!-- 富文本编辑区域，自定义内容为HTML格式 -->
            </div>
        </article>
        <div class="cl-quest cl-receipt">
            <div class="cl-title">
                <i class="iconfont icon-collect"></i>
                <span>征集问题</span>
            </div>
            <!--1.文本 2.单选 3.复选 4.文本域 5.文件框 6.下拉框 7.超链 8.日期型 9.时间型 10.日期时间型-->
            <div class="cl-box" v-for="(item,index) in receiptData" :key="index">
                <span hidden>{{item.id}}</span>
                <p class="title">
                    <b class="index">{{index+1}}.</b> {{item.name}}
                    <i v-if="item.must_or_option==1" class="must">*</i>
                </p>
                <div class="cl-group" v-if="item.type== '5'">
                    <ul class="ms-box-list receipt-box-img">
                        <li v-for="(image,i) in item.value" :key="i" @click="openImgDialog(i,item.value)" class="ms-list-img">
                            <div class="ac-image" :style="{backgroundImage:'url(' + image.url + ')'}"></div>
                            <div class="name">
                                <b>{{image.name}}</b>
                            </div>
                            <span class="download">
                                <i class="iconfont icon-arrow-right"></i>
                            </span>
                        </li>
                    </ul>
                </div>
                <div class="cl-group" v-else>
                    <div class="receipt-box" v-if="!Array.isArray(item.value)">
                        <p>{{item.value}}</p>
                    </div>
                    <div class="receipt-box" v-else>
                        <div v-for="(ele,j) in item.value" :key="j">
                            <p>{{ele}}</p>
                        </div>
                    </div>
                </div>

            </div>

            <div v-transfer-dom>
                <x-dialog v-model="showXimg" class="dialog-img" hide-on-blur @on-hide="hideXdialog">
                    <div @click="hideXdialog" class="close">
                        <i class="iconfont icon-close"></i>
                    </div>
                    <swiper v-model="showImg" :show-dots="false" height="100%">
                        <swiper-item class="swiper-demo-img" v-for="(item, index) in showImgItem" :key="index">
                            <img :src="item.url">
                        </swiper-item>
                    </swiper>
                </x-dialog>
            </div>
        </div>
    </div>
</template>

<script>
//征集
import { getGainFeedbackById } from "@/api/community";
//vux
import { Swiper, SwiperItem, XDialog, TransferDomDirective as TransferDom } from 'vux';
import { getUpToken } from '@/api/qn';
export default {
    data() {
        return {
            //征集id
            rid: this.$route.query.rid,
            // //微信openid
            // openId: this.$route.query.openId,
            eid: this.$route.query.eId,
            showLoading: false,
            showXimg: false,
            showImg: null,
            //多图集合
            showImgItem: null,
            fileList: [],
            data: null,
            receiptData: null,
            qnData: { upData: { key: '', token: '' }, uploadHost: '' },
        }
    },
    directives: {
        TransferDom
    },
    components: {
        Swiper,
        SwiperItem,
        XDialog
    },
    methods: {
        // 打开图片附件弹窗内容
        openImgDialog(i, array) {
            this.showXimg = true
            this.showImg = i
            this.showImgItem = array
            // document.body.style.overflow = 'hidden'
            // document.body.style.position = 'fixed'
        },
        // 关闭清空 弹窗链接内容。还原body滚动功能
        hideXdialog() {
            this.showXimg = false
            this.showImg = null
            // 还原页面滚动
            // document.body.style.overflow = 'auto'
            // document.body.style.position = 'relative'
        }
    },
    async created() {
        this.$vux.loading.show({
            text: 'Loading'
        })
        await setTimeout(() => {
            //根据征集id获取征集
            getGainFeedbackById(this.rid).then(res => {
                //传过来的值赋给data
                res.receipt.content = JSON.parse(res.receipt.content)
                res.receipt.datas = JSON.parse(res.receipt.datas)
                // res.receipt.datas.forEach(function(element) {
                //     // element.value = null
                //     // if (element.type == 5) {
                //     //     element.value = []
                //     // }
                //     // if (element.remark) {
                //     //     element.remark = element.remark.split("\n")
                //     // }
                // }, this);
                this.data = res.receipt
                this.receiptData = res.receipt.datas
                this.receiptData = this.receiptData.filter(item => item.value != null)
                this.receiptData = this.receiptData.filter(item => item.value.length != 0)
                this.$vux.loading.hide()
            }).catch(_ => {
                console.log(_)
                this.$vux.loading.hide()
            })
        }, 800)
    }


}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
